<template>
  <section>
    <div class="page-top-bg">
      <div class="sub-page-box">
        <img src="static/images/default-head.png">
        <p>
          <span>我的名字</span>
          <span>副标题</span>
        </p>
        <a class="generalize-container" @click="doSomething()">
          <span>成为推广员</span>
          <span>立即申请</span>
        </a>
      </div>
      <div class="money-container">
        <div>
          <p>成功提现（元）</p>
          <p>¥ 0.11</p>
        </div>
        <div>
          <p>可提现佣金（元）</p>
          <p>¥ 0.11</p>
        </div>
        <div>
          <button @click="doSomething()">提现</button>
        </div>
      </div>
    </div>
    <InfoItem :list="firstItem"></InfoItem>
    <InfoItem :list="secondItem"></InfoItem>
    <InfoItem :list="thirdItem"></InfoItem>
  </section>
</template>

<script>
  import InfoItem from '@components/InfoItem/InfoItem'
  import { Toast } from 'mint-ui'
  export default {
    name: 'mine',
    components: { InfoItem },
    data () {
      return {
        firstItem:[
          {
            name: '我的佣金',
            number: 1000.65,
            cell: '元',
            icon: 'static/images/money.png'
          },
          {
            name: '佣金明细',
            number: 100,
            cell: '笔',
            icon: 'static/images/detail.png'
          }
        ],
        secondItem:[
          {
            name: '提现明细',
            number: 1000.65,
            cell: '笔',
            icon: 'static/images/actual.png'
          },
          {
            name: '我的下线',
            number: 100,
            cell: '人',
            icon: 'static/images/line.png'
          }
        ],
        thirdItem:[
          {
            name: '我的二维码',
            icon: 'static/images/code.png'
          },
          {
            name: '佣金排名',
            icon: 'static/images/sort.png'
          }
        ]
      }
    },
    mounted () {

    },
    methods: {
      applyApplication () {
        this.$router.push('/popularize')
      },
      doSomething () {
        Toast({
          message: '正在开发中...',
          duration: 1000
        });
      }
    }
  }

</script>

<style lang="scss" scoped>
  section{
    margin-bottom: 0.2rem;
  }
  .page-top-bg{
    position: relative;
    width: 100%;
    height: 6.5rem;
    background: url('../../../static/images/mine-top.png') no-repeat;
    background-size: 100%;
    overflow: hidden;
    .sub-page-box{
      width: 100%;
      height: 1.2rem;
      box-sizing: border-box;
      padding-left: 0.4rem;
      margin-top: 1.1rem;
      img{
        width: 1.2rem;
        height: 1.2rem;
        border-radius: 1.2rem;
        margin-right: 0.3rem;
      }
      p{
        height: 100%;
        display: inline-block;
        margin-top: 0.05rem;
        span{
          display: block;
          color: #fff;
          &:nth-child(1){
            font-size: 0.36rem;
            margin-bottom: 0.2rem;
          }
          &:nth-child(2){
            font-size: 0.24rem;
          }
        }
      }
    }
  }
  .generalize-container{
    display: block;
    width: 2rem;
    height: 0.8rem;
    background: url('../../../static/images/promote-bg.png') no-repeat;
    background-size: 100%;
    float: right;
    margin-top: 0.2rem;
    box-sizing: border-box;
    padding-left: 0.3rem;
    span{
      color: #da9a31;
      display: block;
      &:nth-child(1){
        font-size: 0.28rem;
        margin-top: 0.02rem;
      }
      &:nth-child(2){
        font-size: 0.22rem;
      }
    }
  }
  .money-container{
    position: absolute;
    bottom: 0.36rem;
    width: 100%;
    box-sizing: border-box;
    padding: 0 0.4rem;
    display: flex;
    font-size: 0.28rem;
    div{
      flex-grow: 1;
      color: #333;
      text-align: left;
      p:nth-child(2){
        color: #ed2718;

      }
      button{
        width: 1.4rem;
        height: 0.54rem;
        line-height: 0.54rem;
        text-align: center;
        color: #fff;
        background: #ed2718;
        border: none;
        border-radius: 5px;
        float: right;
        margin-top: 0.2rem;
      }
    }
  }
</style>


